<template>
    <view>
        <view class="box">
            <view class="centers">
                <view class="text">{{ type == 1 ? '封面' : '环境' }}展示图：</view>
            </view>
            <view class="centers-3">
                <van-uploader :max-count="type == 1 ? 1 : 8" :file-list="fileList" :deletable="true"
                    preview-size="150rpx" @after-read="afterRead"
                    upload-icon="https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/take.png" @delete="ondelete"
                    upload-text="添加照片"></van-uploader>
            </view>
            <view class="model-num-text">{{ type == 1 ? '只能设置1张封面照' : '至少1张，最多8张' }}</view>
        </view>

        <view class="addbtn" @tap="onAdd">保存</view>
    </view>
</template>

<script>
import vanUploader from '@/wxcomponents/vant/dist/uploader/index';
//获取应用实例
var app = getApp();

const _request = require('../../../utils/request.js'); // 引入require;

export default {
    components: {
        vanUploader
    },
    data() {
        return {
            baseurl: app.globalData.baseurl,
            fileList: [],
            type: 0 //0环境照, 1封面照
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.onLoadClone3389(options);
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (options) {
            if (options && options.type == 1) {
                this.setData({
                    type: options.type
                });
                uni.setNavigationBarTitle({
                    title: '修改封面图'
                });
            } // 获取用户个人信息

            _request
                .get('/storeCenterInfo/getStoreCenterInfo', {
                    id: uni.getStorageSync('userid')
                })
                .then((res) => {
                    let fileList = [];
                    let list = res.data.data.environmentImg || [];

                    if (options && options.type == 1) {
                        list = res.data.data.coverImg || [];
                    }

                    list.forEach((e) => {
                        fileList.push({
                            type: 'image',
                            url: e,
                            deletable: 'true'
                        });
                    });
                    this.setData({
                        fileList: fileList
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        //上传前
        beforeRead(e) {
            console.log(e);
        },

        // 上传图片
        afterRead(event) {
            let _this = this;

            const { file } = event.detail;
            uni.uploadFile({
                url: this.baseurl + '/store-api/file/batchUpload',
                filePath: file.url,
                name: 'files',
                header: {
                    token: uni.getStorageSync('token') || null
                },
                formData: {
                    user: 'test'
                },

                success(res) {
                    const data = JSON.parse(res.data).data[0];

                    _this.setData({
                        fileList: [..._this.fileList, { ...file, url: data, deletable: 'true' }]
                    });
                },

                fail(error) {
                    console.log(error);
                },

                complete(res) {
                    console.log(res);
                }
            });
        },

        // 删除图片
        ondelete(e) {
            const { file } = e.detail;
            let list = this.fileList.filter((item) => {
                return item.url != file.url;
            });
            this.setData({
                fileList: list
            });
        },

        onAdd: function () {
            let imgs = this.fileList.map((item) => {
                return item.url;
            }); //环境照

            let path = '/storeCenterInfo/updateEnvironmentImg';

            if (this.type == 1) {
                //封面照
                path = '/storeCenterInfo/updateCoverImg';
            }

            _request
                .postObj(path, {
                    storeId: uni.getStorageSync('storeId'),
                    imgs: imgs
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        uni.showToast({
                            title: '修改成功',
                            icon: 'success',
                            duration: 2000
                        });
                        let pages = getCurrentPages();
                        let prevPage = pages[pages.length - 2];
                        prevPage.onLoad();
                        uni.navigateBack({
                            delta: 0
                        });
                    } else {
                        uni.showToast({
                            title: res.data.message,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
page {
    background-color: #fbfbfb;
}

.box {
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10rpx;
    box-sizing: border-box;
    margin: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    padding: 20rpx;
}

.centers {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    padding: 20rpx 0;
    margin: 0 20rpx;
}

.centers-2 {
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    padding: 20rpx;
    background-color: #f9f9f9;
}

.centers-3 {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: center;
    flex-wrap: wrap;
    align-content: center;
    margin: 20rpx;
}

.text {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
}

.model-num-text {
    position: relative;
    right: -200rpx;
    bottom: 0rpx;
    font-size: 32rpx;
    margin-right: 10rpx;
    color: #999999;
}

.topic {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
}

.savebtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 30rpx;
    position: relative;
    top: 100rpx;
}

.textarea {
    height: 180rpx;
}

.textarea-placeholder {
    font-size: 28rpx;
    color: #999999;
}

.img-200 {
    height: 200rpx;
    width: 200rpx;
    border-radius: 10rpx;
    margin: 10rpx;
}

.iconbox {
    height: 200rpx;
    width: 200rpx;
    border-radius: 10rpx;
    margin: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    border: 1px #999999 dotted;
}

.iconbox image {
    width: 80rpx;
    height: 80rpx;
}

.iconbox text {
    margin-top: 20rpx;
    color: #999999;
}

.addbtn {
    width: 690rpx;
    height: 90rpx;
    background: #ff8722;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #f3f3f3;
    line-height: 90rpx;
    text-align: center;
    margin: 300rpx 30rpx 0 30rpx;
    position: absolute;
    bottom: 50rpx;
}
</style>
